<template>
    <div class="app">
        <div class="nav">
            <Navi />
        </div>
        <div class="content">
            <div class="left">
                <img src="../static/index/career-monochromatic.png" class="img" alt="">
            </div>
            <div class="right">
                <span style="font-size: 30px;font-weight: bold;color: #70b6fe;">我能做什么</span>
                <br>
                <span style="font-size: 18px;color: #70b6fe;line-height: 38px;margin-top: 20px;">
                    基于Vue3和Flask的招聘数据可视化平台，凭借其强大的前端Vue3框架和后端Flask技术的结合，为用户提供了一个直观、高效的数据可视化界面。该平台利用Echarts库，将复杂的数据以生动、易懂的形式展示出来，帮助用户深入挖掘数据价值。求职者可以通过这一平台快速找到符合自身需求的信息。在安全方面，所有数据经过严格审核，确保真实有效。这是一个集高效、精准、安全于一体的招聘数据可视化平台，旨在为企业和求职者提供一个便捷、可靠的交流平台。通过这一平台，招聘过程将变得更加高效，求职者也能更快地找到心仪的工作。
                </span>
            </div>
        </div>
        <div class="footer">
            <BotNav />
        </div>
    </div>
</template>

<script>
import Navi from '@/components/Navict.vue'
import BotNav from '@/components/BottomNavict.vue'
export default {
    data() {
        return {
            msg : 'hello world',
        }
    },
    components: {
        Navi,
        BotNav
    },
    mounted() {
        console.log('hello world')
    },
    methods: {

    }
}
</script>

<style scoped>
    .app{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left:0;
    }
    .nav{
        height: 100px;
    }
    .content{
        width: 96%;
        display: flex;
        justify-content: space-evenly;
        margin: 0 auto;
        margin-top: 20px;
    }
    .left{
        width: 50%;
        height: auto;
    }
    .img{
        width: 100%;
        height: 600px;
    }
    .right{
        width: 40%;
        height: auto;
        margin-left: 0px;
    }
    .footer{
        height: auto;
    }
</style>